<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地应用-天知道</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body id="body">
<div class="warp" id="app">
    <div class="search_form clearfix">
        <div class="logo"><h2><span>{{logo}}</span>天气</h2></div>
        <div class="form_group">
            <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="输入地名"/>
            <button class="input_sub">查天气</button>
        </div>
        <div class="hotkey clearfix">
            <a href="javascript:;" @click="changeCity('北京')">北京</a>
            >
            <a href="javascript:;" @click="changeCity('上海')">上海</a>
            >
            <a href="javascript:;" @click="changeCity('广州')">广州</a>
            >
            <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
        </div>
    </div>

    <ul class="weather_list">
        <li v-for="(item,index) in weatherList">
            <div class="info_type">
                <span class="iconfont">{{item.type}}</span>
                <span class="fenxiang">{{item.fengxiang}}</span>
            </div>
            <div class="info_temp">
                <b>{{item.low}}</b>
                ~
                <b>{{item.high}}</b>
            </div>
            <div class="info_date"><span>{{item.date}}</span></div>
        </li>
    </ul>
</div>

<!--官网提供的 axios 在线地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--自己的js-->
<script src="js/main.js"></script>
</body>
</html>
